<template>
  <div id="vuex-app">
    <Menu />
    <h1>根组件 {{$store.state.count}}</h1>
    <input @input="changeCount" :value="count" type="text">
    <Son1 />
    <br>
    <Son2 />
  </div>
</template>

<script>
import Son1 from './Son1.vue'
import Son2 from './Son2.vue'
import { mapState } from 'vuex'
import Menu from '@/components/Menu'

export default {
  name: 'Vuex',
  data () {
    return {
    }
  },
  components: {
    Son1,
    Son2,
    Menu
  },
  created () {
    // eslint-disable-next-line no-undef
  },
  computed: {
    ...mapState(['count']),
  },
  methods: {
    changeCount (e) {
      let value = e.target.value
      this.$store.commit('become', value)
    }
  }
}
</script>

<style lang="less">

</style>
